<!-- 屏幕自适应插件下载：cnpm i --save lib-flexible -->

<template>

  <div id="cesiumContainer">
    <div class="leftbox" ref="leftbox">  
    <div ref="myChart1" class="myChart1">表格1</div>
    <div ref="myChart2" class="myChart2">表格2</div>
    <div ref="myChart3" class="myChart3">表格3</div>
    </div>
    <div class="rightbox" ref="rightbox">    
    <div ref="myChart4" class="myChart4">表格4</div>
    <div ref="myChart5" class="myChart5">表格5</div>
    <div ref="myChart6" class="myChart6">表格6</div>
    </div>
       <div ref="infopopup"  class="infopopup"></div>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
// import axios from 'axios'
export default {
  data() {
    return {
      viewer: null,
          };
  },
  methods: {
    // 初始化 cesium 应用程序
    initViewer() {
      var esri = new Cesium.ArcGisMapServerImageryProvider({ //此处为ArcGIS的数据源
            url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
        })
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2MTkxODY3Zi1iZTNiLTRlZjktOTIzNS04OGRiYTUxYmNkYjYiLCJpZCI6ODY2NjAsImlhdCI6MTY0NzkzODYwOX0.nue7HAVvjO5gEa9D0MbmGn34kPV8U6rSdfsgi76Sf0Y";
      console.log(this);
      this.viewer = new Cesium.Viewer("cesiumContainer",{
            infoBox:false,//隐藏右上角的id信息窗
            selectionIndicator: false,
            baseLayerPicker:false,  //将原来的底图隐藏
            imageryProvider:esri,   //提供新的底图来源
            terrainProvider:new Cesium.CesiumTerrainProvider({ //添加地形数据，获取地形数据的访问权限，CesiumTerrainProvider将地形数据转化为Cesium可以访问的数据
                url:Cesium.IonResource.fromAssetId(1), //放地形服务器的地址
                requestVertexNormals:true,      // 增加法线  提高光照效果
                requestWaterMask:true           //增加水面特效

            }),
            animation:false,//左下角播放事件动画的按钮
            timeline:false,//隐藏时间轴
      });
       // 修改homeButton的默认返回位置
      var _this = this;
      this.viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(e) {
          e.cancel = true;
          _this.viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(109.5,36.7,300000),
          })
      })


      //加载延河流域轮廓geojson数据格式
      this.viewer.dataSources.add( 
        Cesium.GeoJsonDataSource.load('./yanhe_line.geojson')
      )
      this.viewer.camera.flyTo({
            destination:Cesium.Cartesian3.fromDegrees(109.5,36.7,300000), //设定相机的目的地
            orientation:{
                heading:Cesium.Math.toRadians(0),      //heading空值视口方向的水平旋转，也就是沿着Y轴旋转 0为正北方向；，Y为左右，Z为翻转
                pitch:Cesium.Math.toRadians(-90), //pitch空值沿着X轴，为上下旋转 ，-90为俯视
                roll:0  //翻转
            },
            duration:1 //设置飞行时间
        })
 },
    addPoints() {
       var dataa2 = [
        {id:0,
        position:Cesium.Cartesian3.fromDegrees(109.528888888889	,36.4141666666667	,1410),
        vegetation:['鸡爪槭','辽东栎','茶树槭','野樱桃','延安锦鸡儿','水栒子','虎榛子','丁香','黄刺玫'],
        lng:109.528888888889,
        lat:36.4141666666667,
        asp:1410,
        slope:20.5,
        cover:95,
        },
        {id:1,
        position:Cesium.Cartesian3.fromDegrees(109.529166666667,	36.4147222222222	,1400),
        vegetation:['辽东栎','野樱桃','延安锦鸡儿','茶树槭','黄刺玫','水栒子','鸡爪槭','丁香','虎榛子','牛奶子'] ,
           lng:109.529166666667,
        lat:36.4147222222222,
        asp:1400,
        slope:20,
        cover:88,
        },
        {id:2,
        position:Cesium.Cartesian3.fromDegrees(109.528888888889,	36.415,	1400),
        vegetation:['丁香','辽东栎','水栒子','鸡爪槭','延安锦鸡儿','土状绣线菊','结皮忍冬'],
           lng:109.528888888889,
        lat:36.415,
        asp:1400,
        slope:20,
        cover:'',
        
        },
          {id:3,
        position:Cesium.Cartesian3.fromDegrees(109.516944444444	,36.9363888888889,	1280),
        vegetation:['杠柳','狼牙刺'],
           lng:109.516944444444,
        lat:36.9363888888889,
        asp:1280,
        slope:26.5,
        cover:89,
        
        },
          {id:4,
        position:Cesium.Cartesian3.fromDegrees(109.5175	,36.9355555555556,	1230),
        vegetation:['野枣树','刺槐'],
           lng:109.5175,
        lat:36.9355555555556,
        asp:1230,
        slope:10,
        cover:58,
        
        },
          {id:5,
        position:Cesium.Cartesian3.fromDegrees(109.5166667,	36.93388889	,1225),
        vegetation:['红心杨'],
           lng:109.5166667,
        lat:36.93388889,
        asp:1225,
        slope:21.5,
        cover:53,
        },
          {id:6,
        position:Cesium.Cartesian3.fromDegrees(109.516944444444	,36.9344444444444,	1200),
        vegetation:['红心杨','杜梨'],
           lng:109.516944444444,
        lat:36.9344444444444,
        asp:1200,
        slope:34,
        cover:80,
        },
          {id:7,
        position:Cesium.Cartesian3.fromDegrees(109.220277777778,37.0072222222222,1240),
        vegetation: ['刺槐','沙棘'],
           lng:109.2202778
,
        lat:37.00722222
,
        asp:1240,
        slope:16,
        cover:95,
        
        },
          {id:8,
        position:Cesium.Cartesian3.fromDegrees(109.220555555556,37.0069444444444,1233),
        vegetation: ['刺槐','沙棘'],
           lng:109.220555555556,
        lat:37.0069444444444,
        asp:1233,
        slope:20,
        cover:87,
        
        },
          {id:9,
        position:Cesium.Cartesian3.fromDegrees(109.2205556,	37.00611111	,1220),
        vegetation: ['刺槐'],
           lng:109.2205556,
        lat:37.00611111,
        asp:1220,
        slope:25,
        cover:95,
        
        }
        ];
  

       
              
               for(var i =0;i<=dataa2.length;i++){
                  this.viewer.entities.add({
                    id:dataa2[i].id,
                    position:dataa2[i].position,//经纬度高度
                    // point:{
                    //     pixelSize:5,
                    //     color:new Cesium.Color(0,1,0,1)
                    // },
                    billboard:{
                      image:require('../../public/image/(227)2000x2000.png'),
                      show:true,
                      scale:0.8,
                      // color: Cesium.Color.WHITE.withAlpha(0.8),
                      height: 50,
                      width: 50,
                      // rotation: 20,
                      sizeInMeters: false,
                      verticalOrigin: Cesium.VerticalOrigin.CENTER,
                      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                      pixelOffset: new Cesium.Cartesian2(0, 0),

                    },

                    // 设置标签的大小位置颜色
                    // label:{ 
                    // text:res.data[i].classofvegetation,
                    // font:'20px Helvetica',
                    // fillColor:Cesium.Color.WHITE,
                    // },
              });
          }
        
  
      },
    //添加鼠标左键单击事件
      leftClick() {   
              var dataa2 = [
        {id:0,
        position:Cesium.Cartesian3.fromDegrees(109.528888888889	,36.4141666666667	,1410),
        vegetation:['鸡爪槭','辽东栎','茶树槭','野樱桃','延安锦鸡儿','水栒子','虎榛子','丁香','黄刺玫'],
        lng:109.528888888889,
        lat:36.4141666666667,
        asp:1410,
        slope:20.5,
        cover:95,
        },
        {id:1,
        position:Cesium.Cartesian3.fromDegrees(109.529166666667,	36.4147222222222	,1400),
        vegetation:['辽东栎','野樱桃','延安锦鸡儿','茶树槭','黄刺玫','水栒子','鸡爪槭','丁香','虎榛子','牛奶子'] ,
           lng:109.529166666667,
        lat:36.4147222222222,
        asp:1400,
        slope:20,
        cover:88,
        },
        {id:2,
        position:Cesium.Cartesian3.fromDegrees(109.528888888889,	36.415,	1400),
        vegetation:['丁香','辽东栎','水栒子','鸡爪槭','延安锦鸡儿','土状绣线菊','结皮忍冬'],
           lng:109.528888888889,
        lat:36.415,
        asp:1400,
        slope:20,
        cover:'',
        
        },
          {id:3,
        position:Cesium.Cartesian3.fromDegrees(109.516944444444	,36.9363888888889,	1280),
        vegetation:['杠柳','狼牙刺'],
           lng:109.516944444444,
        lat:36.9363888888889,
        asp:1280,
        slope:26.5,
        cover:89,
        
        },
          {id:4,
        position:Cesium.Cartesian3.fromDegrees(109.5175	,36.9355555555556,	1230),
        vegetation:['野枣树','刺槐'],
           lng:109.5175,
        lat:36.9355555555556,
        asp:1230,
        slope:10,
        cover:58,
        
        },
          {id:5,
        position:Cesium.Cartesian3.fromDegrees(109.5166667,	36.93388889	,1225),
        vegetation:['红心杨'],
           lng:109.5166667,
        lat:36.93388889,
        asp:1225,
        slope:21.5,
        cover:53,
        },
          {id:6,
        position:Cesium.Cartesian3.fromDegrees(109.516944444444	,36.9344444444444,	1200),
        vegetation:['红心杨','杜梨'],
           lng:109.516944444444,
        lat:36.9344444444444,
        asp:1200,
        slope:34,
        cover:80,
        },
          {id:7,
        position:Cesium.Cartesian3.fromDegrees(109.220277777778,37.0072222222222,1240),
        vegetation: ['刺槐','沙棘'],
           lng:109.2202778
,
        lat:37.00722222
,
        asp:1240,
        slope:16,
        cover:95,
        
        },
          {id:8,
        position:Cesium.Cartesian3.fromDegrees(109.220555555556,37.0069444444444,1233),
        vegetation: ['刺槐','沙棘'],
           lng:109.220555555556,
        lat:37.0069444444444,
        asp:1233,
        slope:20,
        cover:87,
        
        },
          {id:9,
        position:Cesium.Cartesian3.fromDegrees(109.2205556,	37.00611111	,1220),
        vegetation: ['刺槐'],
           lng:109.2205556,
        lat:37.00611111,
        asp:1220,
        slope:25,
        cover:95,
        
        }
        ];
            var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas)
            var that = this;
            handler.setInputAction(function(event){  
            var pick = that.viewer.scene.pick(event.position);
               if(Cesium.defined(pick))              // && (pick.id.id === 'green')
               {        //判断位置信息是否为空 && 当前所选定的对象id号是否和要弹窗的id号一致
                  that.$refs.infopopup.style.display = 'block'
                  that.$refs.infopopup.innerHTML = '<strong>基础信息:</strong><br /><br />位置：' + dataa2[pick.id.id].lng + 'E,  '+ dataa2[pick.id.id].lat +'N'+ ',<br />海拔：' +dataa2[pick.id.id].asp+'m'+ '，<br />坡度：' +dataa2[pick.id.id].slope+'°' + '，<br />乔木：' +dataa2[pick.id.id].vegetation+ ';<br />总盖度：'+dataa2[pick.id.id].cover
                  console.log(pick);
                  // alert('采样点信息:\n位置：' + res.data[pick.id.id].lng + 'E,  '+ res.data[pick.id.id].lat +'N'+ ',\n海拔：' +res.data[pick.id.id].asl+'m'+ '，\n坡度：' +res.data[pick.id.id].slope+'°'+ '，\n坡向：' +res.data[pick.id.id].asp+ '，\n土壤类型：' +res.data[pick.id.id].classofsoil+ '，\n植被类型：' +res.data[pick.id.id].classofvegetation+ '，\n优势种：' +res.data[pick.id.id].dominantspecies+ '，\n备注：' +res.data[pick.id.id].remark);   //满足条件则弹窗


                 } else {
                  that.$refs.infopopup.style.display = 'none'
                  that.$refs.leftbox.style.display = 'none'
                  that.$refs.rightbox.style.display = 'none'
                 }
        
        },Cesium.ScreenSpaceEventType.LEFT_CLICK);
        
      
      },




  },
  mounted() {
      this.initViewer()
      // this.initCharts()
      this.leftClick()
      this.addPoints()
    
    },
};
</script>

<style scoped>
#cesiumContainer {
  height: 100%;
  width: 100%;
  /* z-index: 1; */
  /* z-index: -1; */
}


.leftbox {
  display: none;
  position: absolute;
  margin-left: 2vh;
  width: 38%;
  height: 100%;
  left: 0px;
  flex-direction: column;
  flex-wrap: nowrap;
}
.myChart1{
  flex: 1;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  z-index: 1;
  /* border: 1px solid red; */
    background: linear-gradient(to left, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}
.myChart2{
  flex: 1;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  z-index: 1;
  background: linear-gradient(to left, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}
.myChart3{
  flex: 1;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  z-index: 1;
  background: linear-gradient(to left, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}

.rightbox {
  display: none;
  position: absolute;
  margin-right: 2vh;
  width: 38%;
  height: 100%;
  right: 0%;
  flex-direction: column;
  flex-wrap: nowrap;
}
.myChart4{
  flex: 1;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  z-index: 1;
  background: linear-gradient(to left, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}
.myChart5{
  flex: 1;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  z-index: 1;
  background: linear-gradient(to left, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}
.myChart6{
  flex: 1;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  z-index: 1;
  background: linear-gradient(to left, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}
.infopopup{
  position: absolute;
  display: none;
  margin-top: 5vh;
  padding: 2%;
  border-radius:0.5rem;
  /* border-bottom-right-radius:0.6rem; */
  width: 12vw;
  left: 41.8%;
  z-index: 1;
  color: black;
  font-size: 2vh;
  background-color: white;
}
</style>